<template>
  <div class="container">
    <div class="title">新闻资讯</div>
    <div class="sub-title">为您推荐公司及行业的前沿资讯，让您随时了解行业动态！</div>
    <div class="search">
      <el-popover placement="bottom" title="检索结果" width="30%" :visible="visible" id="popover">
        <template #reference>
          <el-input
            v-model="searchText"
            type="search"
            size="large"
            placeholder="请输入新闻关键字"
            :prefix-icon="Search"
            @input="visible = true"
            @blur="visible = false"
          />
        </template>
        <div v-if="searchList.length">
          <div
            class="search-item"
            v-for="item in searchList"
            :key="item._id"
            @click="handleDetail(item._id)"
          >
            {{ item.title }}
          </div>
        </div>
        <div v-else>
          <el-empty description="暂无搜索结果" />
        </div>
      </el-popover>
    </div>
  </div>
  <div class="newsList">
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in topNewList" :key="item._id">
        <el-card :body-style="{ padding: '0px' }" shadow="hover" @click="handleDetail(item._id)">
          <img :src="BASE_URL + item.coverPicture" class="img" />
          <div>
            <span>{{ item.title }}</span>
            <div class="bottom">
              <time class="time">{{ newsTime(item.editTime) }}</time>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <el-tabs v-model="whichTab" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane
      :label="item.label"
      :name="item.value"
      v-for="item in NEWS_CATEGORY"
      :key="item.value"
    >
      <el-row :gutter="20">
        <el-col :span="16">
          <div v-for="data in tabNewsList[item.value]" :key="data._id" style="padding: 10px">
            <el-card shadow="hover" @click="handleDetail(data._id)">
              <img :src="BASE_URL + data.coverPicture" class="tabImg" />
              <div class="right">
                <span>{{ data.title }}</span>
                <div class="bottom">
                  <time class="time">{{ newsTime(data.editTime) }}</time>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="8">
          <el-timeline style="max-width: 600px">
            <el-timeline-item
              v-for="(activity, index) in tabNewsList[item.value]"
              :key="index"
              :timestamp="newsTime(activity.editTime)"
            >
              {{ activity.title }}
            </el-timeline-item>
          </el-timeline>
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
  <template>
    <el-backtop :right="100" :bottom="100" />
  </template>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { dayjs } from 'element-plus'
import axios from 'axios'
import { groupBy } from 'lodash'
import { BASE_URL, NEWS_CATEGORY } from '@public/index.js'
import {useRouter} from 'vue-router';

const router = useRouter()
const searchText = ref('')
const visible = ref(false)
const newsList = ref([])
const whichTab = ref(1)
// tab骨架屏loading
const loading = ref(true)
const getData = async () => {
  loading.value = true
  const res = await axios.get('/webApi/news/list')
  if (res.data.code === 200) {
    loading.value = false
    newsList.value = res.data.data
  }
}
// 搜索结果列表
const searchList = computed(() => {
  return searchText.value? newsList.value.filter((item) => item.title.includes(searchText.value)):[]
})
const topNewList = computed(() =>newsList.value.slice(0, 4))
// 处理数据（{1:[{},{}],2:[{},{}]）
const tabNewsList = computed(() => groupBy(newsList.value, 'category'))
// 时间处理
const newsTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}
const handleClick = (tab, event) => {
  console.log(tab, event)
}
// 详情页
const handleDetail = (id) => {
  router.push(`/new_detail/${id}`)
}

onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 300px;
  background-color: aliceblue;
  position: relative;
  .title {
    font-size: 30px;
    font-weight: bold;
    padding-top: 20px;
    text-align: center;
  }
  .sub-title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .search {
    position: absolute;
    top: 60%;
    width: 100%;
    text-align: center;
    .el-input {
      width: 30%;
    }
    .search-item {
      height: 50px;
      width: 50px;
      &:hover {
        background-color: aliceblue;
        color: red;
      }
    }
  }
}
.newsList {
  margin: 20px;

  .el-row {
    margin-bottom: 20px;
    margin-right: 0px !important;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }
  .img {
    width: 100%;
    height: 200px;
  }
  .img + div {
    padding: 15px;
    .bottom {
      padding-top: 10px;
    }
  }
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.tabImg {
  width: 200px;
  height: 100px;
  object-fit: cover;
  float: left;
}
.tabImg + div {
  padding: 15px;
  .bottom {
    padding-top: 10px;
  }
}
.time {
  color: rgb(195, 191, 191);
}
.right {
  float: left;
}

:deep(.el-timeline-item__wrapper) {
  padding-top: 15px;
}
// :deep(.el-timeline+li){
//   .el-timeline-item__wrapper{
//   padding-top: 0px;

//   }
// }
</style>
